<template>
  <div class="file-item" @click="clickFile">
    <img class="icon-delete" src='https://blog-huahua.oss-cn-beijing.aliyuncs.com/blog/code/icon_close.png'
      @click.stop='clickDelete(file)'>
    <div class="file-item-left">
      <!-- <img :src="'https://blog-huahua.oss-cn-beijing.aliyuncs.com/blog/code/icon_' + suffix + '.png'" alt=""
        class="icon-file"> -->
      <img src="@/assets/fujian.png" class="icon-file" alt="">
    </div>
    <div class="file-item-right">
      <h3 class="file-name">
        {{ nameShow }}
      </h3>
      <div class="file-other">
        <span class="file-size">
          {{ sizeShow }}
        </span>
        <span class="file-upload-status">
          {{ file.isUploaded ? '上传完成' : '正在上传...' }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "file-item",
  props: {
    file: {
      default() {
        return {};
      }
    }
  },
  computed: {
    suffix() {
      // this.name如 1.2.pptx
      // [1,2,pptx]
      let arr = this.file.name.split(".");
      // pptx
      let suffix = arr.slice(-1)[0];
      return suffix;
    },
    // name超过10的话就变成xx。。。xx
    nameShow() {
      // 1.2
      let name = this.file.name.slice(
        0,
        this.file.name.indexOf(this.suffix) - 1
      );
      console.log(name);
      let pre =
        name.length < 10 ? name : `${name.slice(0, 8)}...${name.slice(-2)}`;
      return `${pre}.${this.suffix}`;
    },
    sizeShow() {
      let nBytes = this.file.size;
      let sOutput = nBytes + " bytes";
      // optional code for multiples approximation
      const aMultiples = ["k", "m", "g", "t", "p", "e", "z", "y"];
      for (
        let nMultiple = 0, nApprox = nBytes / 1024;
        nApprox > 1;
        nApprox /= 1024, nMultiple++
      ) {
        sOutput = nApprox.toFixed(0) + aMultiples[nMultiple];
      }
      return sOutput;
    }
  },
  data() {
    return {
      x: "close"
    };
  },
  methods: {
    clickDelete(file) {
      this.$confirm('是否确认删除该附件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit("delFile", file);
      }).catch(() => {

      });

    },
    clickFile() {

    }
  }
};

</script>

<style scoped>
h1,
h2,
h3 {
  padding: 0;
  margin: 0;
}

/* prettier-ignore */
.file-item {
  background-color: #f0f1f1;
  padding: 5PX 10PX;
  display: flex;
  align-items: center;
  position: relative;
  width: 260PX;
}

/* prettier-ignore */
.icon-file {
  width: 26PX;
  height: 26PX;
}

/* prettier-ignore */
.file-item-right {
  margin-left: 10PX;
  line-height: 26px;
}

/* prettier-ignore */
.file-name {
  font-size: 14PX;
  color: #222;
}

/* prettier-ignore */
.file-other {
  margin-top: 1PX;
  color: #999;
  font-size: 12PX;
}

/* prettier-ignore */
.file-upload-status {
  margin-left: 5PX;
}

/* prettier-ignore */
.icon-delete {
  position: absolute;
  width: 24PX;
  height: 24PX;
  right: 0;
  top: 0;
  z-index: 2;
}

/* PXtorem-disable-next-line */
</style>
